import { InputNumber, Form, Modal, Select, Tooltip } from "antd";
import { useViewModel, Props } from "./model.view";
import { ExclamationCircleFilled } from "@ant-design/icons";
import { ReactNode } from "react";

const Tip = (props: { children: ReactNode }) => {
  return (
    <Tooltip title={props.children}>
      <ExclamationCircleFilled style={{ marginLeft: 4 }} />
    </Tooltip>
  );
};

export function XHMSettings(props: { onCancel?: () => void } & Props) {
  const { form, onSaveClick } = useViewModel(props);

  return (
    <Modal
      title={"系统设置"}
      open={true}
      destroyOnClose={true}
      maskClosable={false}
      closable={false}
      onOk={onSaveClick}
      onCancel={props.onCancel}
      keyboard={false}
      width={400}
    >
      <Form
        size={"small"}
        form={form}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 18 }}
      >
        <Form.Item
          label={
            <>
              自动登录
              <Tip>
                开启时，每次登录小红帽后，如果之前已经登录过了小红书账号，则会自动登录这些账号
              </Tip>
            </>
          }
          name={"AUTO_LOGIN"}
        >
          <Select
            style={{ width: "auto" }}
            options={[
              {
                label: "开启",
                value: true,
              },
              {
                label: "关闭",
                value: false,
              },
            ]}
          />
        </Form.Item>

        <Form.Item
          label={
            <>
              并发登录数
              <Tip>
                开启自动登录后，自动登录小红书账号时，允许同时执行登录操作的账号数量。并发数越大，同时登录的账号越多，能减少整体等待登录的时间，但是可能造成设备的负载增大，短时间内出现操作卡顿
              </Tip>
            </>
          }
          name={"AUTO_LOGIN_CONCURRENCY"}
        >
          <InputNumber min={1} max={10} />
        </Form.Item>
      </Form>
    </Modal>
  );
}
